<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>添加手写签名</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<!-- <meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" /> -->
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<!-- uc强制竖屏 -->
	<meta name="screen-orientation" content="portrait">
	<!-- QQ强制竖屏 -->
	<meta name="x5-orientation" content="portrait">
	<!-- UC强制全屏 -->
	<meta name="full-screen" content="yes">
	<!-- QQ强制全屏 -->
	<meta name="x5-fullscreen" content="true">
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/jSignature.min.js"></script>
	<link rel="stylesheet" href="css/index.css">
</head>
<style type="text/css">
	.buttonWrap {
	    justify-content: flex-end;
	}
</style>
<body>
	<div class="signature_wrap" id="signature_wrap">
		<div class="placeholderBox">
			<div v-if="isSignaturePadEmpty" class="sign-tips">
				<div class="sign-tip">请使用正楷书写签名</div>
				<div class="sign-tip">保证字迹清晰可辨</div>
			</div>
		</div>
		<div class="signTip">
			<div class="subSignTip">
				<span>添</span><span>加</span><span>手</span><span>写</span><span>签</span><span>名</span>
			</div>
		</div>
		<div id="signature"></div>
		<div class="buttonWrap">
			<style type="text/css">
				.cz-btn{
					width: 50px;
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #1EAFE9;
					border-radius: 3px;
					margin-right: 10px;
					color:#FFFFFF;
				}
				.cz-btn-box{
					width: 130px;
					transform: rotate(90deg);
					margin-bottom: 50px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			</style>
			<div class="cz-btn-box">
				<span class="cz-btn" id="changeToImg">提交</span>
				<span class="cz-btn" id="reset">清空</span>
			</div>
		</div>
	</div>
	<!-- <p>图片预览：</p>
		<div id="imgShow"></div> -->
	<div class="shadowBox">
		请旋转屏幕再浏览
	</div>
	<script>
		var signObj = $('#signature');
		var evt = "onorientationchange" in window ? "orientationchange" : "resize";
		window.addEventListener(evt, resize, false);
		// 监听屏幕旋转
		function resize(fals) {
			var currDeviceObj = currDevice();
			if (window.orientation == 0 || window.orientation == 180) {
				if ($('.shadowBox').hasClass('active')) {
					window.location.reload()
				}
			} else {
				if (currDeviceObj.mobile) {
					if (!currDevice.iPad) {
						$('.shadowBox').addClass('active')
					} else {
						$('.shadowBox').removeClass('active')
					}
				}
			}
		}
		resize(true);
		$(function () {
			var currDeviceObj = currDevice();
			var whArr = deviceBrowserWH();
			if(whArr[0]>whArr[1]){
				// 横屏
				$('.signTip').css({
					width: '100vw'
				});
				if(currDeviceObj.mobile){
					if (!currDevice.iPad) {
						$('.shadowBox').addClass('active')
					}else{
						$('.shadowBox').removeClass('active')
					}
				}

			} else {
				$('.subSignTip span,.buttonWrap img').css({
					transform: 'rotate(90deg)',
					display: 'inline-block'
				});
			}
			// 初始化画布
			signObj.jSignature({
				width: '100vw',
				height: '100vh',
				'UndoButton': false,
				lineWidth: 5,
				color: '#000'
			});
			$("#signature").bind('change', function (e) {
				$('.placeholderBox').hide();
			})
			// 清空画布
			$('#reset').click(function () {
				signObj.jSignature("reset");
				$('.placeholderBox').show();
			})
			// 转换成图片
			$('#changeToImg').click(function () {
				convertToImg();
			})
		})
		/**
		 * 获取设备、浏览器的宽度和高度
		 * @returns
		 */
		function deviceBrowserWH() {
			//获取浏览器窗口的内部宽高 - IE9+、chrome、firefox、Opera、Safari：
			var w = window.innerWidth;
			var h = window.innerHeight;

			// HTML文档所在窗口的当前宽高 - IE8.7.6.5
			document.documentElement.clientWidth;
			document.documentElement.clientHeight;
			document.body.clientWidth;
			document.body.clientHeight;

			var screenW = window.screen.width;//设备的宽度
			var screenH = document.body.clientHeight;

			//网页可见区域宽高，不包括工具栏和滚动条（浏览器窗口可视区域大小）
			var webpageVisibleW = document.documentElement.clientWidth || document.body.clientWidth;
			var webpageVisibleH = document.documentElement.clientHeight || document.body.clientHeight;

			//网页正文全文宽高(不包括滚动条)
			var webpageW = document.documentElement.scrollWidth || document.body.scrollWidth;
			var webpageH = document.documentElement.scrollHeight || document.body.scrollHeight;

			//网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）
			var webpageVisibleW2 = document.documentElement.offsetWidth || document.body.offsetWidth;
			var webpageVisibleH2 = document.documentElement.offsetHeight || document.body.offsetHeight;
			return [w,h]
			//网页卷去的距离与偏移量
			/*
			1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；
			2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；
			3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；
			4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置；
		*/

		}
		/**
		 * 判断当前设备
		 * @returns
		 */
		function currDevice() {
			var u = navigator.userAgent;
			var app = navigator.appVersion;// appVersion 可返回浏览器的平台和版本信息。该属性是一个只读的字符串。
			var browserLang = (navigator.browserLanguage || navigator.language).toLowerCase();	//获取浏览器语言

			var deviceBrowser = function () {
				return {
					trident: u.indexOf('Trident') > -1,  //IE内核
					presto: u.indexOf('Presto') > -1,  //opera内核
					webKit: u.indexOf('AppleWebKit') > -1,  //苹果、谷歌内核
					gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,  //火狐内核
					mobile: !!u.match(/AppleWebKit.*Mobile.*/),  //是否为移动终端
					ios: !!u.match(/\(i[^;]+;( U;)? CPU.Mac OS X/),  //ios终端
					android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,  //android终端或者uc浏览器
					iPhone: u.indexOf('iPhone') > -1,  //是否为iPhone或者QQHD浏览器
					iPad: u.indexOf('iPad') > -1,  //是否iPad
					webApp: u.indexOf('Safari') == -1,  //是否web应用程序，没有头部和底部
					weixin: u.indexOf('MicroMessenger') > -1,  //是否微信
					qq: u.match(/\sQQ/i) == " qq",  //是否QQ
				}
			}();
            console.log(deviceBrowser);
			return deviceBrowser;
		}
		// 获取当前生成的图片
		function convertToImg() {
			//可选格式：native,image,base30,image/jsignature;base30,svg,image/svg+xml,svgbase64,image/svg+xml;base64
			// var dataStr = "data:" + $("#signature").jSignature('getData', "image");
			var dataStr = "data:" + $("#signature").jSignature('getData', "svgbase64");
			localStorage.setItem('userImg',dataStr);
			console.log(dataStr);
			location.href="sueccess.html";
		}

	</script>
</body>

</html>